<template>
  <div class="container" style="margin-top: 50px; margin-bottom: 50px;">
    <el-card shadow="always">
      <el-container>
        <el-aside>
          <MemberMenu/>
        </el-aside>
        <el-main>
          <el-row>
            <el-col :span="24">
              <el-table
                  v-if="orderData.length > 0"
                  v-loading="loading"
                  :data="orderData"
                  style="width: 100%"
                  :default-sort="{ prop: 'changeTime', order: 'descending' }"
              >
                <el-table-column
                    label="订单流水号"
                    prop="dataId">
                  <template slot-scope="scope">
                    <span>{{ scope.row.serialNumber.split(":")[2] }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="目标起飞时间">
                  <template slot-scope="scope">
                    <span>{{ dateTimeFormatter(scope.row.changeDepartureTime.substring(0, 16)) }}</span>
                  </template>
                </el-table-column>

                <el-table-column label="目标到达时间">
                  <template slot-scope="scope">
                    <span>{{ dateTimeFormatter(scope.row.changeArrivalTime.substring(0, 16)) }}</span>
                  </template>
                </el-table-column>



                <el-table-column prop="changeTime" sortable label="改期申请时间">
                  <template slot-scope="scope">
                    <span>{{ dateTimeFormatter(scope.row.changeTime.substring(0, 16)) }}</span>
                  </template>
                </el-table-column>


                <el-table-column
                    label="状态"
                >
                  改期中
                </el-table-column>

              </el-table>

              <el-empty :image-size="200" v-else description="还没有订单数据"></el-empty>

              <el-pagination
                  v-if="orderData.length > 0"
                  background
                  layout="prev, pager, next"
                  :total="total">
              </el-pagination>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>

import {getChangeList} from "@/api/order";
import MemberMenu from "@/views/components/MemberMenu";

export default {
  name: "OrderProcessing",
  data() {
    return {
      total: "",
      orderData: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  components: {
    MemberMenu
  },
  mounted() {
    this.handlerChangeList()
  },
  methods: {
    // 时间格式化器
    dateTimeFormatter(val) {
      const arr = val.split("T");
      return arr[0] + " " + arr[1];
    },
    // 获取改期中订单列表
    handlerChangeList() {
      getChangeList(this.queryParams).then((res) => {
        this.orderData = res.rows;
        this.total = res.total
      })
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
